<template>
  <div>
    <!-- 头部菜单 -->
    <div class="h-top">
      <header class="banxin1 tanxin">
        <div class="h-left"></div>
        <ul class="tanxin">
          <li class="on">发现音乐</li>
          <li>我的音乐</li>
          <li>关注</li>
          <li>商城</li>
          <li>音乐人</li>
          <li class="h-hot">下载客户端 <span></span></li>
        </ul>
        <div class="h-right tanxin">
          <div style="display:inline-block;position:relative">
            <input placeholder="音乐/视频/电台/用户"
                   type="text"
                   class="h-input"
                   v-model="ipt"
                   @input="querySuggest">
            <div class="rap"
                 v-show="ipt">
              <div class="f-cb"
                   v-for="item in suggestText"
                   :key="item.title">
                <h3><i :class="item.icon"></i>{{ item.title }}</h3>
                <ul>
                  <li v-for="it,index in item.content"
                      :key="index"
                      class="elli s-li">{{ it.name }}</li>
                </ul>
              </div>
            </div>
          </div>
          <button>创作者中心</button>
          <img src=""
               alt=""
               v-show="false">
          <a href="#"
             @click.prevent="openLogin">登录</a>
        </div>
      </header>
    </div>
    <!-- 菜单子元素 -->
    <div class="h-foot">
      <ul class="banxin1 tanxin">
        <li v-for="item in children"
            :key="item.name"
            :class="{active:$route.path===item.link}"
            @click="$router.push(item.link)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { suggest } from '@/assets/js/request'
export default {
  data() {
    return {
      children: [
        { name: '推荐', link: '/' },
        { name: '排行榜', link: '/rankingList' },
        { name: '歌单', link: '/playList' },
        { name: '主播电台', link: '/station' },
        { name: '歌手', link: '/singer' },
        { name: '新碟上架', link: '/plate' },
      ],
      //搜索框
      ipt: '',
      // 搜索建议
      suggestText: [
        { title: '单曲', icon: 'icon-1', content: [{ id: null, name: '' }] },
        { title: '歌手', icon: 'icon-2', content: [{ id: null, name: '' }] },
        { title: '专辑', icon: 'icon-3', content: [{ id: null, name: '' }] },
        { title: '歌单', icon: 'icon-4', content: [{ id: null, name: '' }] },
      ],
    }
  },
  methods: {
    openLogin() {
      this.$store.commit('changeOpenLogin', true)
    },
    //输入建议
    querySuggest() {
      let keywords = this.ipt
      suggest({ keywords }).then((res) => {
        if (res.code == 200) {
          this.suggestText.forEach((item, index) => {
            item.content = res.result[res.result.order[index]]
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.elli {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-top {
  width: 100%;
  height: 70px;
  background-color: @black;
  header {
    .h-left {
      background: url(../assets/image/topbar.png) no-repeat 0 9999px;
      width: 177px;
      height: 70px;
      background-position: 0 0;
      cursor: pointer;
      a {
        width: 157px;
        height: 100%;
        padding-right: 20px;
        text-indent: -9999px;
      }
    }
    ul {
      li {
        color: #ccc;
        height: 70px;
        padding: 20px;
        font-size: 14px;
        line-height: 30px;
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #000;
        }
      }
      .on {
        color: #fff;
        background-color: #000;
        &::after {
          content: '';
          background: url(../assets/image/topbar.png) no-repeat 0 9999px;
          display: block;
          position: absolute;
          left: 50%;
          top: 64px;
          width: 12px;
          height: 7px;
          margin-left: -6px;
          overflow: hidden;
          background-position: -226px 0;
        }
      }
      .h-hot {
        span {
          position: absolute;
          background: url(../assets/image/topbar.png) no-repeat 0 9999px;
          top: 21px;
          left: 100px;
          width: 28px;
          height: 19px;
          background-position: -190px 0;
          display: block;
        }
      }
    }
    .h-right {
      gap: 20px;
      justify-content: space-between;
      margin-left: 70px;
      .h-input {
        width: 158px;
        height: 32px;
        background: url(../assets/image/topbar.png) no-repeat 0 9999px;
        background-position: 0 -99px;
        background-color: #fff;
        border-radius: 32px;
        padding-left: 30px;
        box-sizing: border-box;
        outline-style: none;
        border: 0;
        font-size: 12px;
      }
      .rap {
        width: 238px;
        position: absolute;
        background-color: #fff;
        overflow: auto;
        text-align: left;
        box-shadow: 0 4px 7px #555;
        text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
        border-radius: 4px;
        border: 1px solid #bebebe;
        top: 40px;
        left: 0;
        z-index: 120;
        .f-cb {
          h3 {
            line-height: 17px;
            padding: 10px 0 0 10px;
            width: 52px;
            font-size: 14px;
            display: inline-block;
            vertical-align: top;
            i {
              margin: 2px 4px 0 0;
              width: 14px;
              height: 15px;
              display: inline-block;
              background: url(@/assets/image/icon.png) no-repeat 0 9999px;
              vertical-align: middle;
            }
            .icon-1 {
              background-position: -35px -300px;
            }
            .icon-2 {
              background-position: -50px -300px;
            }
            .icon-3 {
              background-position: -35px -320px;
            }
            .icon-4 {
              background-position: -50px -320px;
            }
          }
          ul {
            display: inline-block;
            width: 176px;
            padding: 6px 0 5px;
            border-top: 1px solid #e2e2e2;
            border-left: 1px solid #e2e2e2;
            box-sizing: border-box;
            .s-li {
              width: 100%;
              text-indent: 12px;
              line-height: 24px;
              cursor: pointer;
              color: #333;
              font-size: 12px;
              padding: 0;
              height: 24px;
              &:hover {
                background-color: #ccc;
              }
            }
          }
        }
      }

      button {
        color: #ccc;
        width: 90px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 20px;
        line-height: 30px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #ccc;
        &:hover {
          color: #fff;
          border-color: #fff;
        }
      }
      a {
        color: #787878;
        display: block;
        font-size: 12px;
        &:hover {
          color: #999;
          text-decoration: underline;
        }
      }
    }
  }
}
.h-foot {
  width: 100%;
  height: 34px;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
  ul {
    padding-left: 180px;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
    li {
      display: inline-block;
      height: 20px;
      padding: 0 13px;
      margin: 7px 17px 0;
      border-radius: 20px;
      line-height: 21px;
      cursor: pointer;
      color: #fff;
      font-size: 12px;
      &:hover {
        background-color: #9b0909;
      }
    }
    .active {
      background-color: #9b0909;
    }
  }
}
</style>